<template>
  <div class="classroom-list-wrap">
    <div class="classroom-list-sort">
      <el-button type="primary" size="small" @click="$emit('sort')">智能排序</el-button>
    </div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label"
                   :name="tab.name"></el-tab-pane>
    </el-tabs>
    <ul v-if="dataList.length > 0">
      <li v-for="item in dataList" :key="item.id">
        <div class="cover-img" @click="toLookSubject(item)" :style="{'background': `url(${item.coverUrl}) no-repeat`}"></div>
        <div class="subject-info">
          <div class="subject-info-title">
            <!-- <el-tag effect="plain" :hit="true">课程包</el-tag> -->
            <span class="text">{{item.videoName}}</span>
          </div>
          <div class="subject-info-content"><i class="classroom-teacher-icon"></i><span>授课教师：{{item.createUserName}}</span></div>
          <!-- <div class="subject-info-content"><i class="classroom-site-icon"></i><span>教育部资源中心</span></div> -->
          <div class="subject-info-content">
            <i class="classroom-time-icon"></i><span>{{formatTime(item.createTime)}}</span>
            <i class="classroom-collect-icon"></i><span class="collect">{{item.collectNum}}</span>
            <!-- <i class="classroom-like-icon"></i><span class="like">{{item.likeNum}}</span> -->
          </div>
        </div>
      </li>
      <el-pagination
        v-if="total > 10"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </ul>
    <el-empty class="empty" description="暂无数据" v-else></el-empty>
  </div>
</template>

<script>
export default {
  name: 'CourseList',
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    tabs: {
      type: Array,
      default: () => [
        {
          label: '全部',
          name: ''
        }
      ]
    }
  },
  data() {
    return {
      total: 0,
      current: 1,
      activeTab: ''
    }
  },
  methods: {
    // 格式化时间
    formatTime(time) {
      let result = ''
      if (time) {
        const date = new Date(time)
        result = `${date.getFullYear()}/${(date.getMonth() + 1)}/${date.getDate()}`
      }
      return result
    },
    handleTabClick(val) {},
    toLookSubject(row) {
      const { menuPath } = this.$route.query
      localStorage.setItem('courseDataList', JSON.stringify(this.dataList))
      this.$router.push({
        path: '/onlineClassroom/study',
        query: {
          menuPath: menuPath || this.$route.path + location.search,
          vid: row.id
        }
      })
    },
    handleCurrentChange(val) {
      this.$emit('refresh', {
        pageNo: this.current,
        pageSize: 10
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.classroom-list-wrap {
  position: relative;
  background-color: #fff;
  box-shadow: 0 3px 6px #00000029;
  border-radius: 4px;
  padding: 20px;
  min-height: calc(100vh - 130px);
  .classroom-list-sort {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 99;
  }
  ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    margin-top: 5px;
    li {
      display: flex;
      align-items: center;
      list-style: none;
      margin-bottom: 20px;
      .cover-img {
        width: 280px;
        height: 150px;
        background-size: cover !important;
        background-position: center center !important;
        margin-right: 42px;
        cursor: pointer;
        border-radius: 4px;
      }
      .subject-info {
        flex: 1;
        &-title {
          margin-bottom: 16px;
          .el-tag {
            height: 22px;
            margin-right: 6px;
            border-radius: 11px;
            line-height: 20px !important;
            padding: 0 5px;
            border: 1px solid #004fff;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 12px;
            color: #004fff;
            vertical-align: middle;
          }
          .text {
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 16px;
            text-align: left;
            color: #00080f;
            vertical-align: middle;
          }
        }
        &-content {
          font-family: "Source Han Sans CN";
          font-weight: 500;
          font-size: 14px;
          text-align: left;
          color: #808080;
          margin-bottom: 16px;
          span {
            margin-right: 16px;
            vertical-align: middle;
          }
          i {
            display: inline-block;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            margin-right: 2px;
          }
        }
        &-content:last-child {
          margin-bottom: 0;
        }
        .comment {
          color: #004fff;
        }
        .collect {
          color: #ff7b3f;
        }
        .like {
          color: #ff7b3f;
        }
      }
    }
  }
  .empty {
    width: 200px;
    text-align: center;
    margin: 80px auto 0;
  }
}
.classroom-time-icon {
  background: url("../assets/icons/time-icon.png") no-repeat;
  background-size: cover;
}
.classroom-like-icon {
  background: url("../assets/icons/like-active-icon.png") no-repeat;
  background-size: cover;
}
.classroom-teacher-icon {
  background: url("../assets/icons/teacher-icon.png") no-repeat;
  background-size: cover;
}
.classroom-site-icon {
  background: url("../assets/icons/site-icon.png") no-repeat;
  background-size: cover;
}
.classroom-comment-icon {
  background: url("../assets/icons/comment-icon.png") no-repeat;
  background-size: cover;
}
.classroom-collect-icon {
  background: url("../assets/icons/collect-active-icon.png") no-repeat;
  background-size: cover;
}
</style>
<style lang="scss">
.classroom-list-wrap {
  .el-tabs__item {
    font-family: "Source Han Sans CN";
    font-weight: 500;
    font-size: 20px;
    color: #00080f;
  }
  .el-tabs__active-bar {
    height: 4px;
    border-radius: 2px;
    // margin-top: 2px;
  }
  .el-tabs__nav-wrap::after {
    // height: 2px!important;
    bottom: 1px;
  }
  .el-tabs__nav {
    padding-bottom: 4px;
  }
}
</style>
